<template>
    <div class="ask-content-box">
        <textarea placeholder="请详细描述你的病情"  id="shuru" v-model="msg"></textarea>
        <span class="shuzi">{{msg.length}}/500</span>

        <div class="updataphoto">
            <div class="updataphoto-lf">
                <input type="file" multiple="multiple" name="upfile" @change="productimg" id="upfile" :disabled="disabled" :style="{opacity:op}" />
                <div><el-icon class="mycamera"><CameraFilled /></el-icon></div>
               <span>图片</span>
               <span class="extra">(最多上传三张图片)</span>
            </div>
            <div class="imgs">
                <div v-for="(item, index) in photos.a" :key="index" class="imgs-item">
                   <img :src="item" alt="" />
                   <!-- <el-icon ><Delete /></el-icon> -->
                   <!-- <el-icon ><DeleteFilled /></el-icon> -->
                   <el-icon class="imgs-item-delete" @click="delete1(index)"><CloseBold /></el-icon>
                </div>
            </div>
            <div class="updataphoto-rg">
                <span>上传的病历材料仅医生可见</span>
            </div>
        </div>
    </div>
</template>
<script setup>
    import {ref} from 'vue'
    import store from '@/store/index.ts'
    let myStore1=store()
    let msg=ref("")
    let op=ref(0)
    let photos0=[]
    let disabled=ref(false)
    let photos=ref({a:[]})
     myStore1.msg=msg
     myStore1.photos0=photos0
    //添加图片
    let productimg=()=>{
        let photofile = document.querySelector("#upfile")
        if (photofile.files.length>3) {
            alert("最多只能上传三张图片")
            return
        }
        for(let i=0;i<photofile.files.length;i++){
            //生成网址
             photos.value.a.push(window.URL.createObjectURL(photofile.files[i]))
            //  console.log(window.URL.createObjectURL(photofile.files[i]));
             //添加到数组用于传递给服务器
             photos0.push(photofile.files[i])
             //发生更改，更新仓库内的数据
             myStore1.photos0=photos0
        }
        console.log(photos0);

        //当photos0存在3张时图片按钮静止使用
        if (photos0.length==3) {
            disabled.value=true
        }
    }
    //删除图片

    let delete1=(arg)=>{
        photos.value.a.splice(arg,1)
        photos0.splice(arg,1)
        console.log(photos0);
         //发生更改，更新仓库内的数据
         myStore1.photos0=photos0

         if (photos0.length<3) {
            disabled.value=false
        }
    }
</script>
<style scoped lang="scss">
.extra{
    font-size: 12px;
}
.ask-content-box{
    margin-top: 20px;
    font-size: 12px;
    color: #ccc;
    caret-color: transparent;

    #shuru{
        width: 800px;
        margin-left: 50px;
        height: 200px;
        border: none;
        outline: none;
        resize:none;
        caret-color: black;
    }
    .shuzi{
        display: block;
        width: 850px;
        text-align: right;
        padding-right: 20px;
        box-sizing: border-box;
    }

    .updataphoto{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 20px 0 0 50px;
          color: #999;
          margin-bottom: 20px;
          position: relative;
        .updataphoto-lf{
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            font-size: 16px;
            width: 170px;
            height: 170px;
            background-color: #fafafa;
            position: relative;

            #upfile{
                position: absolute;
                width: 170px;
                height: 170px;
                // opacity: 0;
                left:20px;
                z-index: 99;
            }

            .mycamera{
                font-size: 32px;
                color: #999;
            }
        }
        .updataphoto-rg{
            padding: 0 0 0 20px;
        }
        .imgs {
            position: absolute;
            // width: 300px;
            height: 100px;
            // background-color: red;
            left: 190px;
            top: 105px;
            display: flex;
            justify-content: flex-start;
            .imgs-item{
                position: relative;

                .imgs-item-delete{
                    position: absolute;
                    background-color: #999;
                    left: 40px;
                    top:0;
                    color: red;
                    z-index: 999;
                }
            }
            img{
            width: 50px;
            height: 50px;
              margin-right: 10px;
        }
        }
    }
}
</style>